<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="http://amani.com/function-taglib"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>VIP预约</title>
<%@ include file="../../shared/common_header.jsp"%>
</head>
<body>
	<section id="orders" class="step2">

	<form action="${ROOT_PATH }Orders/mf/step3" name="step2Form"
		id="step2Form" method="post">
		<input name="openid" id="openid" type="hidden" value="${openid }" />
		<input name="ordersFactProject" id="ordersFactProject" type="hidden"
			value="${ordersFactProject }" /> <input name="staffno" id="staffno"
			type="hidden" />
			<input name="companyno" id="companyno" 
			type="hidden" />
			<input name="price" id="price" value="${price }"
			type="hidden" />
			<input name="sourceType" id="sourceType" value="${sourceType }"
			type="hidden" />
			<input name="cardid" id="cardid" value="${cardid }"
			type="hidden" />
			<input name="projectno" id="projectno" value="${projectno }"
			type="hidden" />
			<input name="projectname" id="projectname" value="${projectname }"
			type="hidden" /> 
	</form>

	<nav class="bar bar-tab">
		<c:if test="${fn:length(ServicedStaffinfos)>0  }">
			<a class="tab-item active" href="#" rel="nearby"> 
				<span class="tab-label" >按距离</span>
			</a>
		 	<a class="tab-item " href="#"  rel="serviced"> 
				<span class="tab-label">服务过的</span>
			</a>  
		</c:if>
		<c:if test="${fn:length(ServicedStaffinfos)==0  }">
			<a class="tab-item active" href="#" rel="nearby"> 
				<span class="tab-label" >按距离</span>
			</a> 
		</c:if>
	</nav>
	<div class="content">
	<c:if test="${fn:length(ServicedStaffinfos)>0  }">
		<div class="serviced">
			<ul class="table-view">
				<c:forEach var="item" items="${ServicedStaffinfos }">
				<li class="table-view-cell media" value="${item.staffno }"> 
					<img class="media-object pull-left" width="42px"
						src="${item.staffimageurl }">
						<div class="media-body">
							<div class='staff-name' ><b>${item.staffname }</b></div>   
							<span class='staff-title text-gold'><b>${item.position }</b></span><div style="clear:both"></div>
							<div class='staff-price text-gold'><b>￥${item.price==0?price:item.price }</b></div> 
							 
							<div class='clear'></div>
							<div> 
								<span style="border-right:1px solid #181818;padding-right:10px">从业10年</span>
								<span>接单次数：900次</span>
							</div> 
							
						</div>
						<div style="margin-top:10px;padding-top:10px;border-top:1px solid #181818">
							<div>${item.description }</div>
							<div>
								<span style=" padding-left:10px"><i style="margin-right:5px" class="text-gold fa fa-map-marker"></i>${item.compname }</span>
								<span style=" padding-left:10px;float:right"><i style="margin-right:5px;" class="text-gold fa fa-location-arrow"></i>${item.compaddress }</span>
							</div>
						</div><!-- 
						<div style="margin-top:10px;padding-top:10px;border-top:1px solid #181818;text-align: center;">
							 <button class="btn btn-orders text-gold ">立即预约</button>
						</div> -->
					</li> 
					 </c:forEach> 
					 
			</ul>
		</div> 
		</c:if>
		<div class="nearby">
			<ul class="table-view">
				<c:forEach var="item" items="${NearStaffinfos }">
				<li class="table-view-cell media" value="${item.staffno }" companyno="${item.compno }"> 
					<img class="media-object pull-left" width="42px"
						src="${item.staffimageurl }">
						<div class="media-body">
							<div class='staff-name' ><b>${item.staffname }</b></div>   
							<span class='staff-title text-gold'><b>${item.position }</b></span><div style="clear:both"></div>
							<div class='staff-price text-gold'><b>￥${item.price==0?price:item.price }</b></div> 
							 
							<div class='clear'></div>
							<div> 
								<span style="border-right:1px solid #181818;padding-right:10px">从业10年</span>
								<span>接单次数：900次</span>
							</div> 
							
						</div>
						<div style="margin-top:10px;padding-top:10px;border-top:1px solid #181818">
							<div>${item.description }</div>
							<div>
								<span style=" padding-left:10px"><i style="margin-right:5px" class="text-gold fa fa-map-marker"></i>${item.compname }</span>
								<span style=" padding-left:10px;float:right"><i style="margin-right:5px;" class="text-gold fa fa-location-arrow"></i>${item.compaddress }</span>
							</div>
						</div><!-- 
						<div style="margin-top:10px;padding-top:10px;border-top:1px solid #181818;text-align: center;">
							 <button class="btn btn-orders text-gold ">立即预约</button>
						</div>-->
					</li> 
					 </c:forEach> 
			</ul>

		</div>
	</div>
	</section>
	<script type="text/javascript">
		$(function() {
			var showPosition= function showPosition(position) {
			        $("#orders > div > div.nearby > ul > li > div:nth-child(3) > span:nth-child(3)").text(position);
			    };
			(function initPage(){
				$(".serviced").hide();
				//  navigator.geolocation.getCurrentPosition(showPosition);
			})();

			//数据提交方法
			var commitData = function() {

			};

			$('.tab-item').click(function() {
				var obj = $(this), type = obj.attr('rel');
				obj.addClass('active').siblings().removeClass('active');
				$('.title').show();
				if (type == 'serviced') {
					$('.serviced').show();
					$('.nearby').hide();
				} else if (type == 'nearby') {
					$('.nearby').show();
					$('.serviced').hide();
				}
			});
			
			$('.table-view-cell').click(function(e) {
				var staffno = $(e.currentTarget).attr("value");
				var companyno = $(e.currentTarget).attr("companyno");
				$("#staffno").val(staffno);
				$("#companyno").val(companyno);
				$("#step2Form").submit();
			});
		})
	</script>
</body>
</html>